  

$blue: #288fff;
$blueBg: rgba(40, 143, 255, 0.1);
$toolbarHeight: 50px;

$borderDark: rgba(255, 255, 255, 0.09);
$borderLight: rgb(239, 239, 245);
$bgDark: rgb(24, 24, 28);
$bgLight: #ffffff;

.dag {
  height: 100%;
  overflow: hidden;
}

.content {
  display: flex;
  height: calc(100% - $toolbarHeight - 20px);
  margin-top: 20px;
}

.toolbar {
  height: $toolbarHeight;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 4px;
  justify-content: space-between;
}

.dag-dark .toolbar {
  border: 1px solid $borderDark;
}

.dag-light .toolbar-light {
  border: 1px solid $borderLight;
}

.canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 1;
}

.paper {
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 190px;
  height: 100%;
  margin-right: 20px;
  overflow-y: scroll;
}

.workflow-name {
  font-size: 14px;
  font-weight: 700;
}

.toolbar-btn {
  margin-left: 5px;
}

.draggable {
  display: flex;
  width: 100%;
  height: 32px;
  margin-bottom: 10px;
  align-items: center;
  padding: 0 10px;
  border-radius: 4px;
  transform: translate(0, 0);
  box-sizing: border-box;
  cursor: move;
  font-size: 12px;

  .sidebar-icon {
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
    margin-right: 10px;
    &.icon-shell {
      background-image: url('/images/task-icons/shell.png');
    }
    &.icon-sub_process {
      background-image: url('/images/task-icons/sub_process.png');
    }
    &.icon-data_quality {
      background-image: url('/images/task-icons/data_quality.png');
    }
    &.icon-procedure {
      background-image: url('/images/task-icons/procedure.png');
    }
    &.icon-sql {
      background-image: url('/images/task-icons/sql.png');
    }
    &.icon-flink,
    &.icon-flink_stream {
      background-image: url('/images/task-icons/flink.png');
    }
    &.icon-mr {
      background-image: url('/images/task-icons/mr.png');
    }
    &.icon-python {
      background-image: url('/images/task-icons/python.png');
    }
    &.icon-dependent {
      background-image: url('/images/task-icons/dependent.png');
    }
    &.icon-http {
      background-image: url('/images/task-icons/http.png');
    }
    &.icon-datax {
      background-image: url('/images/task-icons/datax.png');
    }
    &.icon-pigeon {
      background-image: url('/images/task-icons/pigeon.png');
    }
    &.icon-sqoop {
      background-image: url('/images/task-icons/sqoop.png');
    }
    &.icon-conditions {
      background-image: url('/images/task-icons/conditions.png');
    }
    &.icon-seatunnel {
      background-image: url('/images/task-icons/seatunnel.png');
    }
    &.icon-spark {
      background-image: url('/images/task-icons/spark.png');
    }
    &.icon-switch {
      background-image: url('/images/task-icons/switch.png');
    }
    &.icon-emr {
      background-image: url('/images/task-icons/emr.png');
    }
    &.icon-zeppelin {
      background-image: url('/images/task-icons/zeppelin.png');
    }
    &.icon-hivecli {
      background-image: url('/images/task-icons/hivecli.png');
    }
    &.icon-k8s {
      background-image: url('/images/task-icons/k8s.png');
    }
    &.icon-jupyter {
      background-image: url('/images/task-icons/jupyter.png');
    }
    &.icon-mlflow {
      background-image: url('/images/task-icons/mlflow.png');
    }
    &.icon-openmldb {
      background-image: url('/images/task-icons/openmldb.png');
    }
    &.icon-dvc {
      background-image: url('/images/task-icons/dvc.png');
    }
    &.icon-dinky {
      background-image: url('/images/task-icons/dinky.png');
    }
    &.icon-sagemaker {
      background-image: url('/images/task-icons/sagemaker.png');
    }
    &.icon-chunjun {
      background-image: url('/images/task-icons/chunjun.png');
    }
    &.icon-pytorch {
      background-image: url('/images/task-icons/pytorch.png');
    }
  }

  &:hover {
    .sidebar-icon {
      &.icon-shell {
        background-image: url('/images/task-icons/shell_hover.png');
      }
      &.icon-sub_process {
        background-image: url('/images/task-icons/sub_process_hover.png');
      }
      &.icon-data_quality {
        background-image: url('/images/task-icons/data_quality_hover.png');
      }
      &.icon-procedure {
        background-image: url('/images/task-icons/procedure_hover.png');
      }
      &.icon-sql {
        background-image: url('/images/task-icons/sql_hover.png');
      }
      &.icon-flink,
      &.icon-flink_stream {
        background-image: url('/images/task-icons/flink_hover.png');
      }
      &.icon-mr {
        background-image: url('/images/task-icons/mr_hover.png');
      }
      &.icon-python {
        background-image: url('/images/task-icons/python_hover.png');
      }
      &.icon-dependent {
        background-image: url('/images/task-icons/dependent_hover.png');
      }
      &.icon-http {
        background-image: url('/images/task-icons/http_hover.png');
      }
      &.icon-datax {
        background-image: url('/images/task-icons/datax_hover.png');
      }
      &.icon-pigeon {
        background-image: url('/images/task-icons/pigeon_hover.png');
      }
      &.icon-sqoop {
        background-image: url('/images/task-icons/sqoop_hover.png');
      }
      &.icon-conditions {
        background-image: url('/images/task-icons/conditions_hover.png');
      }
      &.icon-seatunnel {
        background-image: url('/images/task-icons/seatunnel_hover.png');
      }
      &.icon-spark {
        background-image: url('/images/task-icons/spark_hover.png');
      }
      &.icon-switch {
        background-image: url('/images/task-icons/switch_hover.png');
      }
      &.icon-emr {
        background-image: url('/images/task-icons/emr_hover.png');
      }
      &.icon-zeppelin {
        background-image: url('/images/task-icons/zeppelin_hover.png');
      }
      &.icon-hivecli {
        background-image: url('/images/task-icons/hivecli_hover.png');
      }
      &.icon-k8s {
        background-image: url('/images/task-icons/k8s_hover.png');
      }
      &.icon-jupyter {
        background-image: url('/images/task-icons/jupyter_hover.png');
      }
      &.icon-mlflow {
        background-image: url('/images/task-icons/mlflow.png');
      }
      &.icon-openmldb {
        background-image: url('/images/task-icons/openmldb_hover.png');
      }
      &.icon-dvc {
        background-image: url('/images/task-icons/dvc_hover.png');
      }
      &.icon-dinky {
        background-image: url('/images/task-icons/dinky_hover.png');
      }
      &.icon-sagemaker {
        background-image: url('/images/task-icons/sagemaker_hover.png');
      }
      &.icon-chunjun {
        background-image: url('/images/task-icons/chunjun_hover.png');
      }
      &.icon-pytorch {
        background-image: url('/images/task-icons/pytorch_hover.png');
      }
    }
  }
}

.dag-dark .draggable {
  border: 1px solid $borderDark;
}

.dag-light .draggable {
  border: 1px solid $borderLight;
}

.dag .draggable {
  &:hover {
    color: $blue;
    border: 1px dashed $blue;
    background-color: $blueBg;
  }
}

.minimap {
  position: absolute;
  right: 0px;
  bottom: 0px;
  border: dashed 1px #e4e4e4;
  z-index: 9;
}

.toolbar-left-part {
  display: flex;
  align-items: center;
  flex: 1;
}

.toolbar-right-part {
  display: flex;
  align-items: center;
  .toolbar-right-item {
    margin-right: 10px;
  }
  .node-selector {
    width: 0;
    overflow: hidden;
    transition: all 0.5s;
    margin-right: 0;

    &.visible {
      width: 200px;
      margin-right: 10px;
    }
  }
}
